<template>
	<view class="order-box">
		<!-- 顶部 tabs 导航栏 -->
		<u-tabs class="top-tabs" :list="caseTypeList" font-size="30" active-color="#00C9B1" gutter="20" bar-width="70" :current="current" @change="tabsChange"></u-tabs>
		<!-- 主体内容区域 -->
		<scroll-view
			scroll-y="true"
			class="container-box"
			:refresher-enabled="true"
			:refresher-triggered="isRefresh"
			@refresherrefresh="refresherStart"
			@scrolltolower="scrollToLower"
		>
			<block v-if="isOrderListNull">
				<u-empty text="暂无订单记录" mode="order"></u-empty>
			</block>
			<block v-else>
				<block v-for="orderItem in orderList" :key="orderItem.order_id">
					<!-- 每个 order-item 就是每个案件项，后续有了数据就在 block 中循环渲染即可 -->
					<order-item :order_type="3" :orderItem="orderItem" @click="orderItemClick" @orderClick="orderClick" @cancelClick="cancelClick"></order-item>
				</block>
			</block>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			sortData: {
				page: 1,
				page_size: 10,
				lawyer_type: '' // 法律类型的 id
			},
			// 顶部可选案件类型的数据列表
			caseTypeList: [],
			// 当前选中项
			current: 0,
			isOrder: false,
			isRefresh: false,
			// 订单列表数据
			orderList: [],
			isOrderListNull: false,		// 如果没有订单数据则此值为 true
		};
	},
	onLoad() {
		this.getCaseTypeList();
		this.getcaseDataList();
	},
	methods: {
		// 获取订单数据
		async getcaseDataList() {
			const res = await this.$u.api.getcaseDataList(this.sortData);
			if (!res) return;
			if(res.length < 1) {
				if(this.orderList.length < 1) return this.isOrderListNull = true
				this.sortData.page = this.sortData.page < 2 ? 1 : (this.sortData.page - 1)
				return
			}
			this.orderList = [...this.orderList, ...res];
			this.isOrderListNull = false
			// console.log('最新的订单列表', this.orderList);
		},
		// 获取案件类型数据列表
		async getCaseTypeList() {
			const res = await this.$u.api.getcaseTypeList();
			if (!res) return;
			this.caseTypeList = [{ id: 0, name: '全部' }];
			for (let k in res) {
				let item = {
					id: res[k].id,
					name: res[k].name
				};
				this.caseTypeList.push(item);
			}
			// console.log(this.caseTypeList);
		},
		tabsChange(index) {
			this.current = index;
			this.sortData.lawyer_type = this.caseTypeList[index].id; // 拿到被点击项的法律类型 id
			this.sortData.page = 1;
			this.orderList = [];
			this.getcaseDataList();
		},
		// 监听每个案件模块的点击事件
		orderItemClick(id) {
			// 路由跳转并传递被点击的案件 id
			this.$u.route('/myPackageA/pages/views/order-details?id=' + id);
		},
		// 监听"接单"按钮的点击事件
		async orderClick(order_id) {
			const res = await this.$u.api.receiveOrder({ order_id: order_id });
			if (!res) return;
			this.sortData.page = 1;
			this.orderList = [];
			this.getcaseDataList();
			this.$u.toast('接单成功');
		},
		// 取消订单按钮的点击事件
		cancelClick(order_id) {
			console.log(order_id);
		},
		// scroll-view 的下拉刷新
		async refresherStart() {
			this.isRefresh = true; // 下拉刷新被触发的状态
			this.sortData.page = 1; // 重置 页码
			this.orderList = []; // 清空页面已有数据
			await this.getcaseDataList(); // 重新获取最新的数据列表
			this.isRefresh = false; // 关闭下拉刷新状态
			this.$u.toast('页面已刷新'); // 提示操作结果
		},
		// scroll-view 滚动条触底事件(获取下一页的数据)
		scrollToLower() {
			this.sortData.page += 1;
			this.getcaseDataList();
		}
	}
};
</script>

<style lang="scss" scoped>
.order-box {
	width: 750rpx;
	height: 100vh;
	background-color: $u-bg-color;
	overflow: hidden;
	.top-tabs {
		width: 100%;
		height: 88rpx;
	}
	.container-box {
		width: 100%;
		height: calc(100vh - 88rpx);
		padding-top: 20rpx;
	}
}
</style>
